<template>
    <div class="dish-container">
        <!-- 搜索和操作区域 -->
        <div class="search-section">
            <div class="search-left">
                <el-input 
                    placeholder="请输入菜品名称" 
                    v-model="initData.name" 
                    class="search-input"
                    clearable
                >
                    <template #prefix>
                        <el-icon><Search /></el-icon>
                    </template>
                </el-input>
                <el-select 
                    v-model="initData.categoryId"  
                    placeholder="请选择分类" 
                    class="category-select"
                    clearable
                >
                    <el-option 
                        v-for="(item,index) in categoryList" 
                        :key="index" 
                        :label="item.name" 
                        :value="item.id" 
                    />
                </el-select>
                <el-select 
                    v-model="initData.status"  
                    placeholder="请选择状态" 
                    class="status-select"
                    clearable
                >
                    <el-option label="停售" value="0"/>
                    <el-option label="启售" value="1"/>
                </el-select>
                <el-button 
                    :icon="Search" 
                    @click="initTable()" 
                    type="primary"
                    class="search-btn"
                >
                    搜索
                </el-button>
                <el-button 
                    @click="resetInitData();initTable()" 
                    class="reset-btn"
                >
                    重置
                </el-button>
            </div>
            <div class="search-right">
                <el-button 
                    @click="deleteDishList" 
                    type="danger"
                    class="batch-delete-btn"
                >
                    <el-icon><Delete /></el-icon>
                    批量删除
                </el-button>
                <el-button 
                    @click="dialogFormVisible = true;editOrAdd=true" 
                    type="primary"
                    class="add-btn"
                >
                    <el-icon><Plus /></el-icon>
                    新增菜品
                </el-button>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="table-section">
            <el-table 
                :data="tableData" 
                ref="tableRef" 
                style="width: 100%" 
                height="500"
                border
                stripe
                highlight-current-row
                class="dish-table"
            >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="菜品名称" width="150" />
                <el-table-column prop="categoryId" label="菜品分类" width="120">
                    <template #default="scope">
                        <el-tag 
                            v-for="(item,index) in getCategoryName(scope.row.categoryId)" 
                            :key="index"
                            type="info"
                            size="small"
                        >
                            {{ item.name }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="价格" width="120">
                    <template #default="scope">
                        <span class="price-text" v-if="scope.row">¥{{ scope.row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="image" label="图片" width="150">
                    <template #default="scope">
                        <div class="image-container" v-if="scope.row">
                            <el-image
                                v-if="scope.row.image" 
                                style="width: 80px; height: 80px; border-radius: 8px;"
                                :src="`/resource/images/${scope.row.image}`"
                                show-progress
                                :preview-src-list="srcList"
                                fit="cover"
                                class="dish-image"
                            />
                            <div v-else class="no-image">
                                <el-icon><Picture /></el-icon>
                                <span>暂无图片</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="描述" width="200">
                    <template #default="scope">
                        <el-tooltip 
                            :content="scope.row.description" 
                            placement="top" 
                            :show-after="500"
                            v-if="scope.row"
                        >
                            <span class="description-text">
                                {{ scope.row.description || '暂无描述' }}
                            </span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <el-tag 
                            :type="scope.row.status === 1 ? 'success' : 'danger'"
                            size="small"
                            v-if="scope.row"
                        >
                            {{ scope.row.status === 1 ? '启售' : '停售' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="scope">
                        <div class="action-buttons" v-if="scope.row">
                            <el-button 
                                @click="dialogFormVisible = true;editOrAdd=false;getDish(scope.row.id)" 
                                type="primary" 
                                :icon="Edit" 
                                size="small"
                                circle
                            />
                            <el-button 
                                @click="deleteDish(scope.row.id)" 
                                type="danger" 
                                :icon="Delete" 
                                size="small"
                                circle
                            />
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页区域 -->
        <div class="pagination-section">
            <el-pagination 
                @current-change="pageFY" 
                background 
                layout="total, sizes, prev, pager, next, jumper" 
                :total="initData.total"
                v-model:current-page="initData.pageNum"
                v-model:page-size="initData.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                class="pagination"
            />
        </div>

        <!-- 新增对话框 -->
        <el-dialog 
            @close="resetForm()" 
            v-model="dialogFormVisible" 
            :title="editOrAdd ? '新增菜品' : '编辑菜品'" 
            width="700px" 
            draggable
            class="dish-dialog"
        >
            <el-form :model="form" label-width="100px" class="form-container">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="菜品名称" required>
                            <el-input v-model="form.name" placeholder="请输入菜品名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜品分类" required>
                            <el-select v-model="form.categoryId" placeholder="请选择分类" style="width: 100%">
                                <el-option 
                                    v-for="category in categoryList" 
                                    :key="category.id" 
                                    :label="category.name" 
                                    :value="category.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="价格" required>
                            <el-input v-model="form.price" placeholder="请输入价格" type="number">
                                <template #prefix>¥</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="图片">
                            <el-upload
                                v-model:file-list="fileList"
                                action="/api/admin/common/uploadLocal"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                                :on-success="handleSuccess"
                                :headers="uploadHeaders"
                                limit="1"
                                class="image-upload"
                            >
                                <el-icon><Plus /></el-icon>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                
                <el-form-item label="描述">
                    <el-input 
                        v-model="form.description" 
                        type="textarea" 
                        :rows="3"
                        placeholder="请输入菜品描述"
                    />
                </el-form-item>
                
                <!-- 口味设置 -->
                <el-form-item label="口味设置">
                    <div class="flavor-container">
                        <div 
                            v-for="(item, index) in form.flavors" 
                            :key="index"
                            class="flavor-item"
                        >
                            <div class="flavor-header">
                                <span class="flavor-title">口味 {{ index + 1 }}</span>
                                <el-button 
                                    @click="removeFlavor(index)" 
                                    type="danger" 
                                    size="small"
                                    circle
                                >
                                    <el-icon><Delete /></el-icon>
                                </el-button>
                            </div>
                            
                            <el-row :gutter="16">
                                <el-col :span="12">
                                    <el-input 
                                        v-model="item.name" 
                                        placeholder="例：辣味"
                                        class="flavor-name-input"
                                    />
                                </el-col>
                                <el-col :span="12">
                                    <el-button 
                                        @click="addFlavorNum(index)" 
                                        type="primary" 
                                        size="small"
                                    >
                                        添加口味值
                                    </el-button>
                                </el-col>
                            </el-row>
                            
                            <div class="flavor-values">
                                <div 
                                    v-for="(item1,index1) in item.value" 
                                    :key="index1"
                                    class="flavor-value-item"
                                >
                                    <el-input 
                                        v-model="item1.nameValue" 
                                        placeholder="例：不辣"
                                        class="flavor-value-input"
                                    />
                                    <el-button 
                                        @click="removeFlavorNum(index,index1)" 
                                        type="danger" 
                                        size="small"
                                        circle
                                    >
                                        <el-icon><Close /></el-icon>
                                    </el-button>
                                </div>
                            </div>
                        </div>
                        
                        <el-button 
                            @click="addFlavor()" 
                            type="primary" 
                            class="add-flavor-btn"
                        >
                            <el-icon><Plus /></el-icon>
                            添加口味
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>
            
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false;">取消</el-button>
                    <el-button 
                        type="primary" 
                        @click="saveDish();dialogFormVisible = false;" 
                        v-if="editOrAdd"
                    >
                        确认添加
                    </el-button>
                    <el-button 
                        type="primary" 
                        @click="updateDish();dialogFormVisible = false;" 
                        v-else
                    >
                        确认修改
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 图片预览对话框 -->
        <el-dialog v-model="dialogVisible" title="图片预览">
            <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%;" />
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref ,reactive } from 'vue';
import axios from 'axios';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Picture,
  Close,
} from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
                                                                    //上传图片
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { id } from 'element-plus/es/locale/index.js';
import { pa } from 'element-plus/es/locale/index.js';
import { el } from 'element-plus/es/locale/index.js';
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const srcList = ref([])
//添加框或者修改框
const editOrAdd = ref(true)

// 根据categoryId获取分类名称
const getCategoryName = (categoryId) => {
    if (!categoryId || !categoryList.value) return [];
    return categoryList.value.filter(item => item.id == categoryId);
}
//添加口味值
const addFlavorNum = (index)=>{
    form.flavors[index].value.push({
        nameValue:''
    });
}

const removeFlavorNum = (index,index1)=>{
    form.flavors[index].value.splice(index1,1);
}


//修改菜品信息和口味信息
const updateDish =()=>{
     if(form.name==null || form.name==""){
        ElMessage("菜品名不能为空")
        return;
    }
    if(form.price==null || form.price==""){
        ElMessage("价格不能为空")
        return;
    }
    if(form.categoryId==null || form.categoryId==""){
        ElMessage("菜品分类不能为空")
        return;
    }
    axios({
        url:'/api/admin/dish',
        method:'put',
        headers:{
            token:sessionStorage.getItem('token')
        },
        data:{
            id:form.id,
            name:form.name,
            categoryId:form.categoryId,
            price:form.price,
            image:form.image,
            description:form.description,
            flavors:form.flavors,
        }
    }).then(res=>{
        if(res.data.code==200){
            ElMessage("修改成功")
            initTable();
        }else{
            ElMessage("修改失败")
        }
            
    })
}



//根据id查询菜品和口味
const getDish = (id) =>{
    axios({
        url:'/api/admin/dish/'+id,
        method:'get',
        headers:{
            token:sessionStorage.getItem('token')
        }
    }).then(res=>{
        console.log(res.data.data)
        form.id = res.data.data.id
        form.name = res.data.data.name
        form.categoryId = res.data.data.categoryId
        form.price = res.data.data.price
        form.image = res.data.data.image
        handlePictureCardPreview1(res.data.data.image);
        form.description = res.data.data.description
        form.flavors = res.data.data.flavors
        console.log(form.flavors)
    })
}
 const handlePictureCardPreview1 = (image) => {
 /*  dialogImageUrl.value = "/resource/images/"+image */
  fileList.value.push({
    name: image,
    url: "/resource/images/"+image,
    status: 'success' // 关键属性！
  })
}



 
//新增菜品对话框表单
const form = reactive({
    id:'',
    name: '',
    categoryId: '',
    price: '',
    image: '',
    description: '',
    flavors: [{
            id:'',
            dishId:'',
            name:'',
            value:[{
                nameValue:''
            }]
    }]
})
const initialForm = reactive({
    id:'',
    name: '',
    categoryId: '',
    price: '',
    image: '',
    description: '',
    flavors: [{
            id:'',
            dishId:'',
            name:'',
            value:[{
                nameValue:''
            }]
    }]
})
//表格多选
const tableRef = ref(null);


//批量删除菜品和对应口味
const deleteDishList =()=>{
    const ids = tableRef.value?.getSelectionRows().map(item => item.id);
    axios({
        url:'/api/admin/dish',
        method:'delete',
        params:{
            ids:ids.join(",")
        },
        headers:{
            token:sessionStorage.getItem('token')
        }
    }).then(res=>{
        console.log(res.data.data);
        initTable();
    })
}

//删除菜品
const deleteDish =(id)=>{
    axios({
        url:'/api/admin/dish',
        method:'delete',
        headers:{
            token:sessionStorage.getItem('token')
        },
        params:{
            ids:id
        }
    }).then(res=>{
        initTable();
    })
}

//重置表单数据
const resetForm = () =>{
    Object.assign(form, initialForm);//清空表单
    form.flavors = [{
        id:'',
        dishId:'',
        name:'',
        value:[]
    }];//清空表单的口味
    fileList.value = [];//清空图片
}
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
//表单项增/删/重置
const addFlavor = () => {
  form.flavors.push({  id:'',
            dishId:'',name: '', value: [] });
};
const removeFlavor = (index: number) => {
  form.flavors.splice(index, 1);
};
const resetFlavor = (index) => {
  form.flavors[index] = { 
    id:'',
    dishId:'',
    name: '',  
    value: []
  };
};

//放上传图片的集合
const fileList = ref<UploadUserFile[]>([])

// 直接定义响应式对象（适合 Token 不变场景）
const uploadHeaders = ref({
  token: sessionStorage.getItem('token') || ''
});

//图片上的删除方法
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  form.image = "";
}
//图片上的展示方法
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
//图片上传成功后的回调函数
const handleSuccess: UploadProps['onSuccess'] = (response, file, fileList) => {
  // response: 后端返回的字符串（直接接收）
  // file: 当前上传的文件对象
  // fileList: 更新后的文件列表
  console.log('服务器返回的字符串:', response); // 输出示例: "images/2025/05/27/abc.jpg"
  console.log('服务器返回的字符串:', file); // 输出示例: "images/2025/05/27/abc.jpg"
  console.log('服务器返回的字符串:', fileList); // 输出示例: "images/2025/05/27/abc.jpg"
  // 将返回值绑定到文件对象的 URL（用于图片回显）
  file.url = `/resource/images/${response.data}`; 
  // 若需要保存到其他变量（如表单数据）
  form.image = response.data;
  console.log("这是表单的数据："+form.image)
};


//查询所有菜品分类
const categoryList = ref([])
const selectCategory = () =>{
    axios({
        url:'/api/admin/category',
        method:'get',
        headers:{
            token:sessionStorage.getItem('token')
        }
    }).then(res => {
        console.log('分类API响应:', res.data);
        if(res.data.code === 200 && res.data.data) {
            categoryList.value = res.data.data;
            console.log('分类列表:', categoryList.value);
        } else {
            console.error('分类API返回错误:', res.data);
            categoryList.value = [];
        }
    }).catch(error => {
        console.error('分类API请求失败:', error);
        categoryList.value = [];
    })
}

//新增菜品方法
const saveDish =()=>{
    if(form.name==null || form.name==""){
        ElMessage("菜品名不能为空")
        return;
    }
    if(form.price==null || form.price==""){
        ElMessage("价格不能为空")
        return;
    }
    if(form.categoryId==null || form.categoryId==""){
        ElMessage("菜品分类不能为空")
        return;
    }
    axios({
        url:'/api/admin/dish',
        method:'post',
        headers:{
            token:sessionStorage.getItem('token')
        },
        data:{
            name:form.name,
            categoryId:form.categoryId,
            price:form.price,
            image:form.image,
            description:form.description,
            flavors:form.flavors,
        }
    }).then(res=>{
            console.log("--------------------------------")
            console.log(res.data)
            initTable();
    })
}




onMounted(()=>{
    initTable();
    selectCategory();
});

//分页
const pageFY =(page)=>{
    initData.value.pageNum=page
    initTable();
}




//初始化表格参数
const initData = ref({
    pageSize:9,
    pageNum:1,
    status:'',
    categoryId:'',
    name:'',
    total:1,
});

const resetInitData =()=>{
    initData.value.name = '';
    initData.value.categoryId = '';
    initData.value.status = '';
}

const tableData = ref([])

//初始化表格数据
const initTable = () =>{
    axios({
        url:"/api/admin/dish/page",
        method:"get",
        params:{
            pageSize:initData.value.pageSize,
            pageNum:initData.value.pageNum,
            status:initData.value.status,
            name:initData.value.name,
            categoryId:initData.value.categoryId
        },
        headers:{
            token:sessionStorage.getItem('token')
        }
    }).then(res=>{
        console.log('API响应:', res.data);
        if(res.data.code === 200 && res.data.data) {
            tableData.value = res.data.data.list || [];
            initData.value.total = res.data.data.total || 0;
            console.log('表格数据:', tableData.value);
        } else {
            console.error('API返回错误:', res.data);
            tableData.value = [];
            initData.value.total = 0;
        }
    }).catch(error => {
        console.error('API请求失败:', error);
        tableData.value = [];
        initData.value.total = 0;
    })
};

</script>

<style scoped>
.dish-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100%;
}

/* 搜索区域样式 */
.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.search-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.search-input {
  width: 200px;
}

.category-select,
.status-select {
  width: 150px;
}

.search-btn,
.reset-btn {
  height: 40px;
  padding: 0 16px;
}

.search-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.batch-delete-btn,
.add-btn {
  height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 表格区域样式 */
.table-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.dish-table {
  border-radius: 8px;
}

.dish-table :deep(.el-table__header) {
  background: #f8f9fa;
}

.dish-table :deep(.el-table__row:hover) {
  background: #f0f9ff;
}

/* 价格文本样式 */
.price-text {
  color: #e74c3c;
  font-weight: 600;
  font-size: 14px;
}

/* 图片容器样式 */
.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dish-image {
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
}

.dish-image:hover {
  transform: scale(1.05);
  border-color: #667eea;
}

.no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #909399;
  font-size: 12px;
  width: 80px;
  height: 80px;
  border: 2px dashed #e9ecef;
  border-radius: 8px;
  justify-content: center;
}

/* 描述文本样式 */
.description-text {
  display: inline-block;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #606266;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-buttons .el-button {
  transition: all 0.3s ease;
}

.action-buttons .el-button:hover {
  transform: scale(1.1);
}

/* 分页区域样式 */
.pagination-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
}

.pagination {
  display: flex;
  justify-content: center;
}

/* 对话框样式 */
.dish-dialog {
  border-radius: 12px;
}

.dish-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
  padding: 20px;
}

.dish-dialog :deep(.el-dialog__title) {
  color: white;
  font-weight: 600;
}

.dish-dialog :deep(.el-dialog__body) {
  padding: 30px;
}

.form-container {
  max-height: 70vh;
  overflow-y: auto;
}

.form-container :deep(.el-form-item) {
  margin-bottom: 20px;
}

.form-container :deep(.el-input),
.form-container :deep(.el-select) {
  width: 100%;
}

.form-container :deep(.el-form-item__label) {
  font-weight: 500;
  color: #333;
}

/* 图片上传样式 */
.image-upload {
  display: flex;
  justify-content: center;
}

.image-upload :deep(.el-upload--picture-card) {
  width: 100px;
  height: 100px;
  border-radius: 8px;
}

/* 口味设置样式 */
.flavor-container {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  background: #f8f9fa;
}

.flavor-item {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.flavor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.flavor-title {
  font-weight: 600;
  color: #333;
}

.flavor-name-input {
  margin-bottom: 12px;
}

.flavor-values {
  margin-top: 12px;
}

.flavor-value-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.flavor-value-input {
  flex: 1;
}

.add-flavor-btn {
  width: 100%;
  height: 40px;
  margin-top: 16px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dish-container {
    padding: 12px;
  }
  
  .search-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-left {
    flex-direction: column;
    gap: 12px;
  }
  
  .search-input,
  .category-select,
  .status-select {
    width: 100%;
  }
  
  .search-right {
    flex-direction: column;
    gap: 12px;
  }
  
  .batch-delete-btn,
  .add-btn {
    width: 100%;
    justify-content: center;
  }
  
  .dish-table {
    font-size: 12px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .action-buttons .el-button {
    width: 32px;
    height: 32px;
  }
  
  .flavor-item {
    padding: 12px;
  }
  
  .flavor-value-item {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .dish-container {
    padding: 8px;
  }
  
  .search-section,
  .table-section,
  .pagination-section {
    padding: 12px;
  }
  
  .dish-dialog :deep(.el-dialog__body) {
    padding: 20px;
  }
  
  .form-container {
    max-height: 60vh;
  }
  
  .flavor-container {
    padding: 12px;
  }
}

/* 动画效果 */
.search-section,
.table-section,
.pagination-section {
  transition: all 0.3s ease;
}

.search-section:hover,
.table-section:hover,
.pagination-section:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.flavor-item {
  transition: all 0.3s ease;
}

.flavor-item:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 加载状态 */
.dish-table :deep(.el-loading-mask) {
  background: rgba(255,255,255,0.9);
}

/* 空状态 */
.dish-table :deep(.el-table__empty-block) {
  padding: 40px 0;
}

.dish-table :deep(.el-table__empty-text) {
  color: #909399;
  font-size: 14px;
}

/* 滚动条样式 */
.form-container::-webkit-scrollbar {
  width: 6px;
}

.form-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.form-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.form-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>